<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-50109714-5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-50109714-5');
</script>


	<meta name="author" content="Anonymous">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>WaveGAN Demo</title>

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="css/wavegan.css">
</head>

<body>

<div id="overlay">
    <div id="spinner"></div>
    <p id="overlay_weights" class="overlay_txt">
        Loading network...
    </p>

</div>

<div id="content" hidden>

<h1>WaveGAN Demo</h1>

<div id="canceled" hidden>
	<p>Please try again on a different browser or refresh if you change your mind :)</p>
</div>

<div id="demo">
	<h3>Chris Donahue, Julian McAuley, Miller Puckette</h3>

	<p>This is a demo of our WaveGAN method trained on drum sound effects (<a href="https://arxiv.org/abs/1802.04208">paper</a>, <a href="https://github.com/chrisdonahue/wavegan">code</a>). All drum sounds are synthesized in browser by a neural network.</p>

	<p><b>Shortcuts:</b> Keys <b>1-8</b> play sounds. <b>Shift+[1-8]</b> changes sounds. <b>Space</b> starts/stops sequencer.</p>

	<div class="slider" id="gain-slider">
	<label>Volume</label><input type="range" id="gain" min="0" max="10000"></input>
	</div>

	<div class="slider" id="reverb-slider">
	<label>Reverb</label><input type="range" id="reverb" min="0" max="10000"></input>
	</div>

	<div id="zactors">
	</div>

	<div id="sequencer">
		<div id="sequencer-buttons">
			<button type="button" id="sequencer-play">Play</button>
			<button type="button" id="sequencer-stop">Stop</button>
			<button type="button" id="sequencer-clear">Clear</button>
		</div>

		<div id="sequencer-sliders">
			<div class="slider">
			<label>Tempo</label><input type="range" id="sequencer-tempo" min="0" max="10000"></input>
			</div>
			<div class="slider">
			<label>Swing</label><input type="range" id="sequencer-swing" min="0" max="10000"></input>
			</div>
		</div>

		<div id="sequencer-ui">
			<canvas id="sequencer-canvas" height="320" width="677"></canvas>
		</div>
	</div>
</div>

</div>

<script id="zactor-template" type="text/template">
<div id="{ID}" class="zactor">
    <canvas height="90" width="160"></canvas>
    <button type="button" class="change">Change</button>
    <button type="button" class="save">Save</button>
</div>
</script>

<script type="text/javascript" src="js/deeplearn-0.4.1.min.js"></script>
<script type="text/javascript" src="js/wavegan_cfg.js"></script>
<script type="text/javascript" src="js/wavegan_reqs.js"></script>
<script type="text/javascript" src="js/wavegan_net.js"></script>
<script type="text/javascript" src="js/wavegan_player.js"></script>
<script type="text/javascript" src="js/wavegan_visualizer.js"></script>
<script type="text/javascript" src="js/wavegan_sequencer.js"></script>
<script type="text/javascript" src="js/wavegan_savewav.js"></script>
<script type="text/javascript" src="js/wavegan_ui.js"></script>

</body>
</html>
